<template>
  <div class="app-container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>{{ isEdit ? '修改库存记录' : '新增库存记录' }}</span>
      </div>
      
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <el-form-item label="商品" prop="productId">
              <id-selector
                v-model="form.productId"
                placeholder="请选择商品"
                dialog-title="选择商品"
                :api-function="listProduct"
                :get-api-function="getProduct"
                id-field="productId"
                name-field="productName"
                id-label="商品ID"
                name-label="商品名称"
                search-label="商品名称"
                search-placeholder="请输入商品名称"
                :extra-columns="[{prop: 'productCode', label: '商品编码'}, {prop: 'price', label: '价格'}]"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <el-form-item label="SKU" prop="skuId">
              <id-selector
                v-model="form.skuId"
                placeholder="请选择SKU"
                dialog-title="选择SKU"
                :api-function="listSku"
                :get-api-function="getSku"
                id-field="skuId"
                name-field="skuName"
                id-label="SKU ID"
                name-label="SKU名称"
                search-label="SKU名称"
                search-placeholder="请输入SKU名称"
                :extra-columns="[{prop: 'skuCode', label: 'SKU编码'}, {prop: 'price', label: '价格'}]"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <el-form-item label="操作类型" prop="operationType">
              <el-select v-model="form.operationType" placeholder="请选择操作类型" style="width: 100%">
                <el-option
                  v-for="dict in dict.type.ec_opreate_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <el-form-item label="操作数量" prop="operationQuantity">
              <el-input v-model="form.operationQuantity" placeholder="请输入操作数量" type="number" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <el-form-item label="操作前库存" prop="beforeStock">
              <el-input v-model="form.beforeStock" placeholder="请输入操作前库存" type="number" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <el-form-item label="操作后库存" prop="afterStock">
              <el-input v-model="form.afterStock" placeholder="请输入操作后库存" type="number" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <el-form-item label="关联订单号" prop="orderNo">
              <el-input v-model="form.orderNo" placeholder="请输入关联订单号" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <el-form-item label="操作人" prop="operator">
              <el-input v-model="form.operator" placeholder="请输入操作人" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="操作原因" prop="operationReason">
              <el-input v-model="form.operationReason" type="textarea" :rows="3" placeholder="请输入操作原因" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item style="text-align: center; margin-top: 30px;">
          <el-button type="primary" @click="submitForm" :loading="loading">{{ isEdit ? '修改' : '新增' }}</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getLog, addLog, updateLog } from "@/api/fun/log"
import { listProduct, getProduct } from "@/api/fun/product"
import { listSku, getSku } from "@/api/fun/sku"
import IdSelector from "@/components/IdSelector"

export default {
  name: "LogForm",
  components: {
    IdSelector
  },
  dicts: ['ec_opreate_type'],
  data() {
    return {
      // 提交状态
      loading: false,
      // 是否为编辑模式
      isEdit: false,
      // 表单参数
      form: {
        logId: null,
        productId: null,
        skuId: null,
        operationType: null,
        operationQuantity: null,
        beforeStock: null,
        afterStock: null,
        orderNo: null,
        operationReason: null,
        operator: null
      },
      // 表单校验
      rules: {
        productId: [
          { required: true, message: "商品ID不能为空", trigger: "blur" }
        ],
        operationType: [
          { required: true, message: "操作类型不能为空", trigger: "change" }
        ],
        operationQuantity: [
          { required: true, message: "操作数量不能为空", trigger: "blur" }
        ],
        beforeStock: [
          { required: true, message: "操作前库存不能为空", trigger: "blur" }
        ],
        afterStock: [
          { required: true, message: "操作后库存不能为空", trigger: "blur" }
        ],
      }
    }
  },
  created() {
    const pageType = this.$route.query.pageType
    const logId = this.$route.query.logId || this.$route.query.id
    if (pageType === 'edit' && logId) {
      this.isEdit = true
      this.getLogInfo(logId)
    }
  },
  methods: {
    /** 获取库存记录详细信息 */
    getLogInfo(logId) {
      getLog(logId).then(response => {
        this.form = response.data
      })
    },
    /** 表单重置 */
    reset() {
      this.form = {
        logId: null,
        productId: null,
        skuId: null,
        operationType: null,
        operationQuantity: null,
        beforeStock: null,
        afterStock: null,
        orderNo: null,
        operationReason: null,
        operator: null
      }
      this.resetForm("form")
    },
    /** 取消按钮 */
    cancel() {
      this.$tab.closePage()
    },
    /** 商品列表API */
    listProduct(params) {
      return listProduct(params)
    },
    /** 获取商品详情API */
    getProduct(id) {
      return getProduct(id)
    },
    /** SKU列表API */
    listSku(params) {
      return listSku(params)
    },
    /** 获取SKU详情API */
    getSku(id) {
      return getSku(id)
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.loading = true
          if (this.form.logId != null) {
            updateLog(this.form).then(response => {
              this.$modal.msgSuccess("修改成功")
              // 通知父页面刷新列表
                this.$eventBus.$emit('refreshLogList')
                this.$tab.closePage()
            }).finally(() => {
              this.loading = false
            })
          } else {
            addLog(this.form).then(response => {
              this.$modal.msgSuccess("新增成功")
              // 通知父页面刷新列表
              this.$eventBus.$emit('refreshLogList')
              this.$tab.closePage()
            }).finally(() => {
              this.loading = false
            })
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
</style>